<template>
	<view class="recharge-page">
		<!-- 头部 -->
		<view class="header">
			<view class="balance-info">
				<text class="balance-label">当前余额</text>
				<text class="balance-amount">¥{{balance}}</text>
			</view>
		</view>

		<!-- 充值金额选择 -->
		<view class="amount-section">
			<view class="section-title">选择充值金额</view>
			<view class="amount-grid">
				<view v-for="(item, index) in amountOptions" :key="index" class="amount-item"
					:class="{active: selectedAmount === item}" @click="selectAmount(item)">
					<text>¥{{item}}</text>
				</view>
				<view class="amount-item custom-amount" :class="{active: isCustomAmount}">
					<input type="number" placeholder="自定义" v-model="customAmount" @focus="handleCustomAmountFocus"
						@blur="handleCustomAmountBlur" />
				</view>
			</view>
		</view>

		<!-- 支付方式选择 -->
		<view class="payment-section">
			<view class="section-title">选择支付方式</view>
			<view class="payment-list">
				<view v-for="(item, index) in paymentMethods" :key="index" class="payment-item"
					@click="selectPayment(item.id)">
					<image class="payment-icon" :src="item.icon"></image>
					<text class="payment-name">{{item.name}}</text>
					<image class="payment-check"
						:src="selectedPayment === item.id ? '../../../static/zhifu.png' : '../../../static/bai.png'">
					</image>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="recharge-btn" @click="handleRecharge">立即充值</button>
		</view>
	</view>
</template>

<script setup>
	// 引入Vue响应式API
	import {
		ref,
		onMounted
	} from 'vue';
	// 引入HTTP请求工具
	import {
		http
	} from '@/config/request.js'
	import "@/config/request.js";
	import {
		useuser
	} from '../../../stores/user.js';
	const user = useuser();
	// 响应式数据
	const balance = ref(0)
	const amountOptions = ref([1000, 2000, 5000, 10000, 30000]) //充值金额
	const selectedAmount = ref(0) //充值金额
	const customAmount = ref('') //自定义金额
	const isCustomAmount = ref(false) //是否在自定义金额
	const paymentMethods = ref([{
			id: 1,
			name: '微信支付',
			icon: "../../../static/weixin.png"
		},
		{
			id: 2,
			name: '支付宝',
			icon: "../../../static/zhifubao.png"
		},
		{
			id: 3,
			name: '银行卡',
			icon: "../../../static/ka.png"
		}
	])
	//初始为微信支付
	const selectedPayment = ref(1)
	//查询钱包余额方法方法
	const loadBalance = async () => {
		const ref = await http({
			url: '/getWallet/' + user.user.id,
			method: 'GET'
		})
		console.log(ref)
		if (ref.code === 20041) {
			balance.value = ref.shuju.balance
		} else {
			uni.showToast({
				title: '余额获取失败',
				icon: 'none',
			});
		}
	}
	// 生命周期钩子
	onMounted(() => {
		loadBalance()
	})
	const selectAmount = (amount) => {
		selectedAmount.value = amount
		isCustomAmount.value = false
		customAmount.value = ''
	}
	//获得焦点事件
	const handleCustomAmountFocus = () => {
		isCustomAmount.value = true //自定义金额
		selectedAmount.value = 0
	}
	//失去焦点事件
	const handleCustomAmountBlur = () => {
		if (customAmount.value) {
			//失去焦点时如果有值则更新充值金额
			selectedAmount.value = parseFloat(customAmount.value)
		} else {
			isCustomAmount.value = false //关闭自定义金额
		}
	}
	//选择支付方式的方法 
	const selectPayment = (id) => {
		selectedPayment.value = id
	}
	const handleRecharge = async () => {
		if (!selectedAmount.value || selectedAmount.value <= 0) {
			uni.showToast({
				title: '请选择充值金额',
				icon: 'none'
			})
		} else {
			console.log(balance.value)
			// 更新余额
			var yue =balance.value +=selectedAmount.value 
			const xx = {
				balance:yue,
				fid:user.user.id,
			}
			console.log(xx)
			const ref = await http({
				url: '/updatefid1',
				method: 'POST',
				data: xx
			})
			if (ref.code === 20041) {
				//充值金额
				const amount = selectedAmount.value
				//用什么充值的
				const paymentMethod = paymentMethods.value.find(item => item.id === selectedPayment.value)
					.name
				uni.showLoading({
					title: '正在支付...'
				})
				// 支付请求
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: `${paymentMethod}充值成功`,
						icon: 'success'
					})
				}, 500)
				loadBalance()
			} else {
				uni.showToast({
					title: '充值失败',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
	.recharge-page {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 头部样式 */
	.header {
		background-color: #002fa7;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		color: #fff;
		margin-bottom: 30rpx;
	}

	.balance-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.balance-label {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.balance-amount {
		font-size: 48rpx;
		font-weight: bold;
	}

	/* 金额选择区域 */
	.amount-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
	}

	.amount-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.amount-item {
		width: 30%;
		height: 100rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #ddd;
		border-radius: 12rpx;
		font-size: 32rpx;
		color: #333;
	}

	.amount-item.active {
		border-color: #002fa7;
		background-color: #e6f0ff;
		color: #002fa7;
	}

	.custom-amount input {
		width: 80%;
		text-align: center;
		font-size: 32rpx;
	}

	/* 支付方式区域 */
	.payment-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.payment-list {
		margin-top: 20rpx;
	}

	.payment-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.payment-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.payment-name {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}

	.payment-check {
		width: 40rpx;
		height: 40rpx;
	}

	/* 底部按钮 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.recharge-btn {
		background-color: #002fa7;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.recharge-btn:after {
		border: none;
	}
</style>